<template>
  <div>
    <el-form ref="cateAdd" :model="cate" :rules="rules" label-width="120px">
      <el-form-item label="分类名字" prop="cateName">
        <el-input v-model="cate.cateName"/>
      </el-form-item>
      <el-form-item label="父级分类" prop="pid">
        <el-cascader v-model="cate.pid" :options="pCates" :props="{
        checkStrictly: true,
        label: 'cateName',
        emitPath: false,
        value: 'id'
      }" clearable />
      </el-form-item>
      <el-form-item label="是否启用" prop="enable">
        <el-switch v-model="cate.enable" inline-prompt active-text="启用" inactive-text="禁用" />
      </el-form-item>
      <el-form-item label="分类图标">
        <el-upload ref="uploadRef"
          action="/api/upload"
          name="file"
          accept=".jpg,.png,.gif"
          :data="{a: 10,b: 20}"
          :on-success="uploadSuccess"
          :auto-upload="false"
          :before-upload="beforeUpload"
        >
          <el-button type="primary">选择文件</el-button>
        </el-upload>
          <img :src="cate.cateIcon" width="100" alt="">
          <el-button @click="doUpload" type="primary">点击上传</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { fetchCateDetail, updateCate } from '@/api/cateLists'
export default {
  props: {
    cates: {
      type: Array,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      rules: {
        cateName: [
          {
            required: true,
            message: '分类名字段必填'
          }
        ],
        pid: [
          {
            required: true,
            message: '父级分类必选'
          }
        ],
        enable: [
          {
            required: true,
            message: '是有启动必选'
          }
        ]
      },
      cate: {
        cateName: '',
        cateIcon: '',
        enable: true,
        pid: -1
      },
      pCates: [
        {
          id: -1,
          cateName: '顶层层类'
        }
      ]
    }
  },
  watch: {
    // cates: {
    //   handler (newVal) {
    //     this.pCates = [
    //       ...this.pCates,
    //       ...newVal
    //     ]
    //   },
    //   deep: true,
    //   immediate: true
    // },
    id: {
      handler (newVal) {
        fetchCateDetail(newVal).then(res => {
          if (res.data.code === 200) {
            this.cate = res.data.data
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    beforeUpload (file) {
      if (file.size > 1024 * 1024 * 5) {
        alert('文件不能超过5m')
        return false
      } else {
        return true
      }
    },
    doUpload () {
      this.$refs.uploadRef.submit()
    },
    uploadSuccess (res) {
      if (res.code === 200) {
        this.cate.cateIcon = res.data.url
        this.$message({
          type: 'success',
          message: res.msg
        })
      }
    },
    onSubmit () {
      this.$refs.cateAdd.validate().then(() => {
        updateCate(this.cate).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg,
              duration: 2000,
              onClose: () => {
                this.$router.go(0)
              }
            })
          }
        })
      }).catch(() => {
        alert('验证失败')
      })
    },
    resetForm () {
      this.$refs.cateAdd.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
